<script setup>
import {SearchOutlined} from "@ant-design/icons-vue";
import {onMounted, ref} from "vue";
import {queryPicResourceAnalysis} from "@/api/statistics.js";
import * as echarts from "echarts";

const dateForm = ref({
  startDate: '',
  endDate: ''
})
const searchTime = ref()
const dates = ref([])
const picSizes = ref([])
const newPicSizes = ref([])
const picNums = ref([])

const formatDateToBeijingISO = (date) => {
  const beijingOffset = 8 * 60;
  const utcDate = new Date(date.getTime() + (beijingOffset * 60 * 1000));
  return `${utcDate.toISOString().split('T')[0]}T00:00:00`;
}

// 将字节转换为MB
const bytesToMB = (bytes) => {
  return (bytes / (1024 * 1024)).toFixed(2);
}

const onClickWeek = () => {
  const today = new Date()
  const startOfWeek = new Date(today)
  startOfWeek.setDate(today.getDate() - 6)
  const endOfWeek = today

  dateForm.value.startDate = formatDateToBeijingISO(startOfWeek)
  dateForm.value.endDate = formatDateToBeijingISO(endOfWeek)
  fetchPicResourceStats()
}

const onClickMonth = () => {
  const today = new Date()
  const startOfMonth = new Date(today)
  startOfMonth.setDate(today.getDate() - 29)
  const endOfMonth = today

  dateForm.value.startDate = formatDateToBeijingISO(startOfMonth)
  dateForm.value.endDate = formatDateToBeijingISO(endOfMonth)
  fetchPicResourceStats()
}

const onClickSearchTime = () => {
  if (!searchTime.value || !searchTime.value[0] || !searchTime.value[1]) {
    return
  }
  dateForm.value.startDate = formatDateToBeijingISO(searchTime.value[0].$d)
  dateForm.value.endDate = formatDateToBeijingISO(searchTime.value[1].$d)
  fetchPicResourceStats()
}

const fetchPicResourceStats = () => {
  queryPicResourceAnalysis(dateForm.value)
    .then(res => {
      if (res.data.code === 1) {
        dates.value = res.data.data.timeList.map(date => date.split('T')[0])
        picSizes.value = res.data.data.picSizeList.map(size => bytesToMB(size))
        newPicSizes.value = res.data.data.newPicSizeList.map(size => bytesToMB(size))
        picNums.value = res.data.data.picNumList
        initChart()
      }
    })
    .catch(error => {
      console.log(error)
    })
}

const initChart = () => {
  const chartDom = document.getElementById('picResourceStats')
  const myChart = echarts.init(chartDom)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['总容量(MB)', '图片数量', '新增容量(MB)']
    },
    xAxis: {
      type: 'category',
      data: dates.value,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '容量(MB)',
        min: 0,
        alignTicks: true
      },
      {
        type: 'value',
        name: '图片数量',
        min: 0,
        alignTicks: true
      }
    ],
    series: [
      {
        name: '总容量(MB)',
        type: 'line',
        data: picSizes.value,
        color: '#1f77ff',
        smooth: true
      },
      {
        name: '图片数量',
        type: 'line',
        yAxisIndex: 1,
        data: picNums.value,
        color: '#ff1a1a',
        smooth: true
      },
      {
        name: '新增容量(MB)',
        type: 'bar',
        data: newPicSizes.value,
        color: '#ff792f'
      }
    ]
  }

  option && myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  onClickMonth()
})
</script>

<template>
  <div class="pic-resource-statistics-container">
    <div class="button-container">
      <a-button type="primary" @click="onClickWeek">近一周</a-button>
      <a-button type="primary" @click="onClickMonth">近一月</a-button>
      <a-range-picker v-model:value="searchTime" :format="'YYYY-MM-DD'"/>
      <a-button type="primary" shape="circle" @click="onClickSearchTime">
        <template #icon>
          <SearchOutlined/>
        </template>
      </a-button>
    </div>
    <div id="picResourceStats" class="pic-resource-statistics"></div>
  </div>
</template>

<style scoped>
.pic-resource-statistics-container .button-container {
  display: flex;
  justify-content: right;
  gap: 10px;
}

.pic-resource-statistics {
  margin-top: 10px;
  width: 100%;
  height: 400px;
}
</style>
